import React, { useState, useEffect } from 'react';
import { Tooltip } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import { ContestStatus } from '@/types/contest';
import styles from './ContestCountdown.module.css';

interface ContestCountdownProps {
  startTime: string;
  endTime: string;
  status: ContestStatus;
}

const ContestCountdown: React.FC<ContestCountdownProps> = ({ startTime, endTime, status }) => {
  const [countdown, setCountdown] = useState<string>('');
  const [timeRemaining, setTimeRemaining] = useState<number>(0);

  // 计算倒计时
  useEffect(() => {
    const calculateCountdown = () => {
      const now = new Date().getTime();
      const startDate = new Date(startTime).getTime();
      const endDate = new Date(endTime).getTime();
      
      // 比赛未开始
      if (status === '1') {
        const timeToStart = startDate - now;
        if (timeToStart <= 0) {
          // 刷新页面以更新比赛状态
          window.location.reload();
          return;
        }
        setTimeRemaining(timeToStart);
      } 
      // 比赛进行中
      else if (status === '0') {
        const timeToEnd = endDate - now;
        if (timeToEnd <= 0) {
          // 刷新页面以更新比赛状态
          window.location.reload();
          return;
        }
        setTimeRemaining(timeToEnd);
      }
      // 比赛已结束
      else {
        setTimeRemaining(0);
        setCountdown('比赛已结束');
        return;
      }
    };

    calculateCountdown();
    const interval = setInterval(calculateCountdown, 1000);

    return () => clearInterval(interval);
  }, [startTime, endTime, status]);

  // 格式化倒计时显示
  useEffect(() => {
    if (timeRemaining <= 0 && status === '-1') {
      setCountdown('比赛已结束');
      return;
    }

    const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

    let formattedCountdown = '';
    if (days > 0) {
      formattedCountdown += `${days}天 `;
    }
    formattedCountdown += `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    if (status === '1') {
      setCountdown(`距离开始: ${formattedCountdown}`);
    } else if (status === '0') {
      setCountdown(`距离结束: ${formattedCountdown}`);
    }
  }, [timeRemaining, status]);

  // 根据比赛状态决定倒计时颜色
  const getCountdownClass = () => {
    if (status === '1') return styles.upcoming; // 即将开始 - 灰色
    if (status === '0') return styles.ongoing;  // 进行中 - 绿色
    return styles.ended;                        // 已结束 - 红色
  };

  return (
    <div className={styles.countdown}>
      <Tooltip title={status === '1' ? '比赛即将开始' : status === '0' ? '比赛进行中' : '比赛已结束'}>
        <ClockCircleOutlined className={styles.icon} />
        <span className={getCountdownClass()}>{countdown}</span>
      </Tooltip>
    </div>
  );
};

export default ContestCountdown; 